<template>
	<div class="pt-4 text-center">
		<base-button
			type="primary"
			:textT="betslipStore.tab === BetslipTab.Follow ? 'feed.followBet' : 'betslip.betting'"
			bold
			block
			:disabled="bettingDisabled"
			@click="betslipStore.submitBets()" />
		<div class="mt-4 flex justify-evenly text-t-1 app-font-bold">
			<div class="flex items-center app-text-link" @click="betslipStore.clear()">
				<base-icon class="mr-1" name="clear" />
				{{ $t('betslip.clear') }}
			</div>
			<div class="flex items-center app-text-link" @click="share()">
				<base-icon class="mr-1" name="share" />
				{{ $t('betslip.share') }}
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { BaseButton, BaseIcon } from '@/components/base'
import { useBetslipStore } from '@/store'
import { BetslipTab, BetslipItemStatus } from '@/types'
import { share } from '@/utils'
import { computed } from 'vue'

const betslipStore = useBetslipStore()

const bettingDisabled = computed(() => {
	if (betslipStore.tab === BetslipTab.Single) {
		return betslipStore.list.some(
			(item) =>
				item.status !== BetslipItemStatus.none ||
				!item.amount ||
				item.needAccept ||
				item.isOverLimit
		)
	} else if (betslipStore.tab === BetslipTab.Combo) {
		return (
			betslipStore.list.length < 2 ||
			betslipStore.list.some((item) => item.status !== BetslipItemStatus.none) ||
			(betslipStore.combo.disableIds && betslipStore.combo?.disableIds?.length > 1) ||
			!betslipStore.combo.amount ||
			betslipStore.combo.needAccept ||
			betslipStore.combo.isOverLimit
		)
	} else if (betslipStore.tab === BetslipTab.Follow) {
		betslipStore.followList.some((item) => item.status !== BetslipItemStatus.none) ||
			(betslipStore.combo.disableIds && betslipStore.combo?.disableIds?.length > 1) ||
			!betslipStore.combo.amount ||
			betslipStore.combo.needAccept ||
			betslipStore.combo.isOverLimit
	}
	return false
})
</script>
